<template>
    <div>
      <p class="all">
          <input type="radio" name="b" value="0" checked="checked" />
          <span>★</span>
          <input type="radio" name="b" value="1" />
          <span>★</span>
          <input type="radio" name="b" value="2" />
          <span>★</span>
          <input type="radio" name="b" value="3" />
          <span>★</span>
          <input type="radio" name="b" value="4" />
          <span>★</span>
          <input type="radio" name="b" value="5" />
          <span>★</span>
      </p>         
    </div>
</template>

<script>

export default {
  data () { 
    return {

    }
  },
  created: function () {

  },
  components: {

  },
  methods: {

  }
}
</script>

<style scoped>
    .all>input{opacity:0;position:absolute;width:2em;height:2em;margin:0;cursor:pointer;}
    .all>input:nth-of-type(1),
    .all>span:nth-of-type(1){display:none;}
    .all>span{font-size:2em;color:gold;
    }
    .all>input:checked~span{color:#666;}
    .all>input:checked+span{color:gold;}

</style>
